<!--
 * @Author: 徐汉卿 xuhanqing@imohoo.com
 * @Date: 2023-08-30 16:42:02
 * @LastEditors: 徐汉卿 xuhanqing@imohoo.com
 * @LastEditTime: 2023-09-01 14:39:19
 * @FilePath: /sy-app2/src/pages/index/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <view style="" class="view1">
    <!-- <view :style="{height:navBarHeight +'px',backgroundColor:'red'} "></view> -->
    <nut-sticky>
      <view class="nav" :style="{ height: navBarHeight + 'px' }"></view>
    </nut-sticky>

    <nut-swiper
      :init-page="page"
      :pagination-visible="true"
      pagination-color="#000"
      auto-play="0"
      :loop="false"
    >
      <nut-swiper-item>
        <view class="container1">
          <view
            @click="clickF(item)"
            class="item"
            v-for="(item, index) in ['本地翻译', '考勤系统', '管理系统', 'IMS系统']"
          >
            <view class="item1">
              <Image
                class="item1_1"
                :src="require(`../../assets/images/${index}.png`)"
              ></Image>
              <!-- <Image class="item1_1" :src="img0"></Image> -->

              <view class="item1_2">{{ item }}</view>
            </view>
          </view>
        </view>
      </nut-swiper-item>
      <!-- <nut-swiper-item>
        <view class="container1">
          <view
            class="item"
            v-for="(item, index) in ['本地翻译', '考勤系统', '管理系统', 'IMS系统']"
          >
            <view class="item1">
              <Image
                class="item1_1"
                :src="require(`../../assets/images/${index}.png`)"
              ></Image>
              

              <view class="item1_2">{{ item }}</view>
            </view>
          </view>
        </view>
      </nut-swiper-item> -->
    </nut-swiper>
  </view>
  <view style="height: 800px"></view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { ref } from "vue";
const page = ref(0);

const { statusBarHeight } = Taro.getSystemInfoSync();
// 获取小程序右上角胶囊的大小
const { height, top } = Taro.getMenuButtonBoundingClientRect();
/*
      计算出小程序导航栏的整体高度，这里要加上系统状态栏的高度，
      否则小程序顶部内容会顶到状态栏最顶部位置
    */
const navBarHeight = height + (top - statusBarHeight) * 2 + statusBarHeight;

// const clickF = (index)=>{

//   Taro.showToast({title:index+""})
//   showTodo()

// }
const clickF = (index) => {
  console.log("Index:", index);
  if (index === "本地翻译") {
    Taro.navigateTo({
      url: "/pages/todo/index",
    });
  } else if (index === "考勤系统") {
    Taro.navigateTo({
      url: "/pages/ALogin/index",
    });
  }
// } else if (index === "考勤系统") {
//     Taro.navigateTo({
//       url: "/pages/attendance/index",
//     });
//   }
};
// const showTodo = ()=>{
//   Taro.navigateTo({
//   url: '/pages/todo/index',
// })
// }
</script>
<style>
.view1 {
  /* background: linear-gradient(to bottom, rgba(139,167,235), #ffffff); */
}
.nav {
  background: linear-gradient(to bottom, rgba(139, 167, 235, 1), rgba(174, 197, 240, 1));
}
.nut-swiper-item {
  /* line-height: 350px; */
  height: 250px;
  /* background-color: #fff; */
}
.nut-swiper-item img {
  width: 100%;
  height: 100%;
}

page {
  --nut-swiper-pagination-item-width: 30px;
  --nut-swiper-pagination-item-border-radius: 4px;
  background-color: #f5f5f5;
}

.container1 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* background-color: purple; */
  height: 100%;

  background: linear-gradient(to bottom, rgba(174, 197, 240, 1), #ffffff);

  /* background: linear-gradient(to bottom, rgba(139,167,235), #ffffff); */
}
.item {
  display: flex;
  flex-direction: row;
  width: 25%;
  height: 100%;
  /* background-color: red; */
  justify-content: center;
  align-items: center;
}

.item1 {
  width: 70%;
  /* background-color: blue; */
  /* height: 100px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item1_1 {
  height: 80px;
  background-color: darkcyan;
  width: 80px;
  border-radius: 25px;
}
.item1_2 {
  /* background-color: purple; */
  margin-top: 10px;
  height: 40px;
  font-size: 28px;
  color: #666;
  text-align: center;
}
</style>
